<template>
	<view class="content">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="search">
				<image class="searchImg" src="../../static/images/search.png"></image>
				<input class="searchInput" type="text" placeholder="驱虫新品" />
			</view>
			<image class="messageImg" src="../../static/images/message.png"></image>
		</view>
		
		<view class="main">
			<scroll-view class="mainScroll" scroll-y="true" enable-flex >
				<!-- 轮播图 -->
				<swiper class="mainSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(banner,index) in bannerList" :key="banner.advid">
						<view class="swiper-item">
							<image class="swiperImg" :src="banner.img_url" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 年货节 年货大吉图片 -->
			<image class="mainImg active" :src="yearsImg1.img_url"></image>
			<image class="mainImg" :src="yearImg2.img_url"></image>
			<!-- 宠物风尚 -->
			<view class="petStyle">
				<text class="styleText">{{petTitle}}</text>
				<view class="styleItem" v-for="(pet,index) in petStyle" :key='pet.gid'>
					<view class="left">
						<image class="leftImg" :src="pet.goods_img" ></image>
					</view>
					<view class="right">
						<text class="rightText">{{pet.title}}</text>
						<view class="rightItem">
							<image class="rightImg" :src="pet.img_src" mode=""></image>
							<view class="rightItemText">
								<text class="rightText1">￥{{pet.sale_price}}</text>
								<text class="rightText2">{{pet.be_interested}}</text>
							</view>
						</view>
					</view>
				</view>	
			</view>
			
			<!-- 心选特惠 -->
			<view class="choose">
				<view class="chooseText">
					<text class="chooseText1">心选特惠</text>
					<text class="chooseText2">严选好物降价了</text>
				</view>
				<view class="chooseContainer">
					<view class="chooseItem" v-for="(choose,index) in choose" :key="choose.gid">
						<image class="chooseImg" :src="choose.goods_img"></image>
						<text class="chooseTitle">{{choose.title}}</text>
						<view class="choosePrice">
							<text class="choosePrice1">￥{{choose.sale_price}}</text>
							<text class="choosePrice2">￥{{choose.market_price}}</text>
						</view>
					</view>

				</view>
			</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		mounted() {
			this.getListData()
		},
		methods:{
			getListData(){
				this.$store.dispatch('getListData')
			}
		},
		computed:{
			...mapGetters(['indexList']),
			bannerList(){
				return (this.indexList[0] || {}).images || []
			},
			yearsImg1(){
				return (this.indexList[1] || {}).images || []
			},
			yearImg2(){
				return (this.indexList[2] || {}).images || []
			},
			// 宠物风尚
			petStyle(){
				return (this.indexList[3] || {}).goodsList || []
			},
			petTitle(){
				return (this.indexList[3] || {}).title || []
			},
			// 心选特惠
			choose(){
				return (this.indexList[4] || {}).goodsList || []
			}
			
		}
	}
</script>

<style lang="stylus">
	.content
		height 100%
		.header
			height 50rpx
			width 700rpx
			background-color #F7F7F7
			display flex
			.search
				display flex
				flex 1
				align-items center
				height 50rpx
				background-color #FDFDFD
				border-radius 30rpx
				box-sizing border-box
				line-height 50rpx
				margin-left 40rpx
				.searchImg
					width 20rpx
					height 20rpx
					margin-left 20rpx
				.searchInput
					font-size 28rpx
					padding-left 20rpx
			.messageImg
				width 50rpx
				height 50rpx
				background-color #F7F7F7
				margin-left 50rpx
		
		.main
			padding 20rpx
			background-color #F7F7F7
			.mainScroll
				height calc(100vh - 100rpx)
				// border 1rpx solid #007AFF
				// box-sizing border-box
				.mainSwiper
					.swiper-item
						.swiperImg
							border-radius 60rpx
							width 100%
			.mainImg
				width 100%
				height 166rpx
				margin-top 20rpx
				&.active 
					height 250rpx
				
			.petStyle
				width 788rpx
				height 556rpx
				background-color #FFFFFF
				// border 1rpx solid pink
				// box-sizing border-box
				.styleText
					width 768rpx
					height 56rpx
					line-height 56rpx
					font-size 36rpx
					font-weight 900
					margin-top 10rpx
					margin-bottom 10rpx
					padding-left 10rpx
				.styleItem
					display flex
					.left
						.leftImg
							width 382rpx
							height 230rpx
							border-radius 30rpx
					.right
						width 310rpx
						height 230rpx
						border-radius 0 40rpx 20rpx 0
						background-color #F7F7F7
						.rightText
							display block
							font-size 28rpx
							padding 10rpx
						.rightItem
							display flex
							width 100%
							padding 10px
							.rightImg
								width 100rpx
								height 100rpx
								border-radius 10rpx
							.rightItemText
								width 152rpx
								height 100rpx
								// border 1rpx solid #007AFF
								padding-left 10rpx
								.rightText1
									display inline-block
									font-size 28rpx
									font-weight 900
								.rightText2
									font-size 20rpx
									color #999999
			.choose
				height 380rpx
				padding 20rpx
				background-color #FFFFFF
				border-radius 100rpx
				.chooseText
					.chooseText1
						font-size 38rpx
						font-weight 900
					.chooseText2
						font-size 28rpx
						color #999999
						margin 20rpx
				.chooseContainer
					display flex
					width 100%
					margin-top 20rpx
					.chooseItem
						display flex
						flex-direction column
						width 200rpx
						margin 10rpx
						.chooseImg
							width 200rpx
							height 200rpx
							border-radius 40rpx
						.chooseTitle
							white-space: nowrap;    /*规定文本不换行**/
							text-overflow: ellipsis;  /**显示省略符号来代表被修剪的文本。*/
							overflow: hidden;
							margin-top 10rpx
						.choosePrice
							.choosePrice1
								font-size 28rpx
								font-weight 600
							.choosePrice2
								font-size 20rpx
								margin-left 8rpx
								text-decoration line-through
								color #999999
</style>	
			
				

			